<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>批量导入(商品，每日库存，销售价格)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <div v-if="loading" style="position: fixed; top: 0; left: 0; width: 100%;height: 100%; z-index: 9000;" v-loading="loading" element-loading-text="更新商品数据中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
        <el-form :inline="true">
            <el-form-item>
                <el-button :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                    @click="window.history.back()">返回</el-button>
            </el-form-item>
            <el-form-item>
                <el-upload class="upload-demo" accept=".xlsx" ref="upload" action="" :show-file-list="false"
                    :on-change="handleChange" :auto-upload="false">
                    <el-button :disabled="loading" slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button :loading="loading" style="margin-left: 10px;" size="small" type="success"
                        @click="chackUpload(0)">上传文件</el-button>
                    <el-button style="margin-left: 10px;" :loading="loading" size="small" type="success"
                        @click="submitImage">上传图片</el-button>
                    <el-button :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                        @click="handleClean">清空数据</el-button>
                    <el-badge :value="success" style="margin-left: 10px;" class="item" type="success">
                        <el-button :type="filter=='1'?'success':''" size="small" @click="handleTab('1')">成功</el-button>
                    </el-badge>
                    <el-badge style="margin-left: 10px;" :value="error" class="item">
                        <el-button :type="filter=='2'?'danger':''" size="small" @click="handleTab('2')">失败</el-button>
                    </el-badge>
                </el-upload>
            </el-form-item>
        </el-form>
        <!-- <el-row :gutter="20">
            <el-col :span="5"> -->
        <div style="display: flex; width: 100%;">
            <div
                style="display: flex;flex-direction: column; flex-shrink: 1;  border: 1px solid #EBEEF5; padding: 10px; margin-right: 10px;">
                <!-- <div style="display: flex; border: 1px solid #EBEEF5; padding: 10px; margin-right: 10px;"> -->
                <upload-images :data="image"></upload-images>
                <div id="Main_Image" style="width: 100%; display: flex; flex-wrap: wrap;" class="cont-scroll-wrap">
                    <div class="preview" v-for="(item,index) in image" :key="item">
                        <el-image :ref="'Main'+index" :preview-src-list="[item.Base64]"
                            class="el-upload-list__item-thumbnail" fit="contain" :src="item.Base64"
                            style="width: 148px; height: 148px;"></el-image>
                        <span class="el-upload-list__item-actions">
                            <span @click="handleImgClick('Main'+index)" style="cursor: pointer;"><i
                                    class="el-icon-zoom-in"></i></span>
                            <span @click="RemoveImage(index)" style="cursor: pointer;"><i
                                    class="el-icon-delete"></i></span>
                        </span>
                    </div>
                </div>
            </div>
            <!-- </el-col>
            <el-col :span="16"> -->
            <div style="width: 100%;">
                <el-table ref="multipleTable" v-if="isTable"
                    :data="Data.slice((form.page-1)*form.limit,form.page*form.limit)" stripe border
                    style="width: calc(95vw - 360px);" height="calc(100vh - 180px)">
                    <!-- <el-table-column type="selection" align="center" :selectable="selectable" reserve-selection width="40"></el-table-column> -->
                    <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                        <template v-slot="{row,$index}">
                            <el-button v-if="row.isStatus!='3'" size="small" :disabled="loading"
                                :type="row.isEdit?'success':'primary'" @click="handleEdit(row)">
                                {{row.isEdit?'保存':'修改'}}
                            </el-button>
                            <el-tooltip v-else class="item" effect="dark" content="当前数据正在确认中，暂时无法修改"
                                placement="top-start">
                                <el-button size="small" style="cursor: not-allowed" type="info">修改</el-button>
                            </el-tooltip>
                            <el-button size="small" :disabled="loading" type="danger"
                                @click="handleRemove($index,'form')">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" width="100">
                        <template v-slot="{row}">
                            <el-tag
                                :type="row.isStatus=='1'?'success':row.isStatus=='2'?'danger':row.isStatus=='3'?'warning':''"
                                :style="{cursor: row.isStatus=='3'?'pointer':'default'}" @click="handleSubmit(row)">
                                {{row.isStatus=='1'?'成功':row.isStatus=='2'?'失败':row.isStatus=='3'?'点击确认':'待导入'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="原因说明" show-overflow-tooltip align="center" width="150">
                        <template v-slot="{row}">
                            {{row.Cause}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="headeData.length == 0" label="暂无导入数据" align="center"></el-table-column>
                    <el-table-column min-width="160" show-overflow-tooltip v-for="item in headeData" :key="item"
                        :label="item" align="center" :prop="item">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit&&row.isStatus!='3'" v-model="row[item]" clearable></el-input>
                            <span v-else>{{row[item]}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange($event,'form')"
                    @current-change="handleCurrentChange($event,'form')" :current-page="form.page"
                    :page-sizes="[15, 30 , 60 ,100, 250, 500]" :page-size="form.limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="Data.length">
                </el-pagination>
            </div>
        </div>
        <!-- </el-col> -->
        <!-- <el-col :span="12">
                <el-table ref="multipleTable" v-if="isTable"
                    :data="imageDate.slice((form1.page-1)*form1.limit,form1.page*form1.limit)" stripe border
                    style="width: 100%" height="calc(75vh - 180px)">
                    <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                        <template v-slot="{row,$index}">
                            <el-button v-if="row.isStatus!='3'" size="small" :disabled="loading"
                                :type="row.isEdit?'success':'primary'" @click="handleEdit(row)">
                                {{row.isEdit?'保存':'修改'}}
                            </el-button>
                            <el-tooltip v-else class="item" effect="dark" content="当前数据正在确认中，暂时无法修改"
                                placement="top-start">
                                <el-button size="small" style="cursor: not-allowed" type="info">修改</el-button>
                            </el-tooltip>
                            <el-button size="small" :disabled="loading" type="danger"
                                @click="handleRemove($index,'form1')">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" width="100">
                        <template v-slot="{row}">
                            <el-tag
                                :type="row.isStatus=='1'?'success':row.isStatus=='2'?'danger':row.isStatus=='3'?'warning':''"
                                :style="{cursor: row.isStatus=='3'?'pointer':'default'}" @click="handleSubmit(row)">
                                {{row.isStatus=='1'?'成功':row.isStatus=='2'?'失败':row.isStatus=='3'?'点击确认':'待导入'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="原因说明" show-overflow-tooltip align="center" width="150">
                        <template v-slot="{row}">
                            {{row.Cause}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="imageHeader.length == 0" label="暂无导入数据" align="center"></el-table-column>
                    <el-table-column min-width="160" show-overflow-tooltip v-for="item in imageHeader" :key="item"
                        :label="item" align="center" :prop="item">
                        <template v-slot="{row}">
                            <el-input v-if="row.isEdit&&row.isStatus!='3'" v-model="row[item]" clearable></el-input>
                            <span v-else>{{row[item]}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange($event,'form1')" @current-change="handleCurrentChange($event,'form1')"
                    :current-page="form1.page" :page-sizes="[15, 30 , 60 ,100, 250, 500]" :page-size="form1.limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="ImageData.length">
                </el-pagination>
            </el-col> -->

        <!-- </el-row> -->
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/import1.js"></script>
</body>

</html>